<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.name" size="small" clearable placeholder="输入医院名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-input v-model="query.code" size="small" clearable placeholder="输入医院代码搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
    </div>
    <!-- 医院表格 -->
    <el-table
      ref="table"
      v-loading="crud.loading"
      highlight-current-row
      style="width: 100%;"
      :data="crud.data"
      @selection-change="crud.selectionChangeHandler"
      @current-change="handleCurrentChange"
    >
      <el-table-column :selectable="checkboxT" type="selection" width="55" />
      <el-table-column show-overflow-tooltip prop="name" label="医院名称" />
      <el-table-column show-overflow-tooltip prop="dataScope" label="医院代码" />
      <el-table-column prop="level1" label="医院类型" />
      <el-table-column prop="level2" label="是否能支付" />
      <el-table-column prop="level3" label="医保开通" />
      <el-table-column prop="level4" label="账单循环条数" />
      <el-table-column v-if="checkPer(['admin','roles:edit','roles:del'])" label="操作" width="180px" align="center" fixed="right">
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <!-- <pagination /> -->
    <!-- 表单组件 -->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1040px">
      <el-form ref="form" class="form-break-two" :inline="true" :model="form" :rules="rules" size="small" label-width="120px">
        <el-form-item label="医院名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="医院代码" prop="code">
          <el-input-number v-model.number="form.code" :min="1" controls-position="right" />
        </el-form-item>
        <el-form-item label="类  型" prop="name">
          <el-radio-group v-model="form.name">
            <el-radio label="本院" />
            <el-radio label="分院" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="线上支付" prop="name">
          <el-radio-group v-model="form.name">
            <el-radio label="支持" />
            <el-radio label="不支持" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="医保支付" prop="name">
          <el-radio-group v-model="form.name">
            <el-radio label="支持" />
            <el-radio label="不支持" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="参保地编号" prop="port">
          <el-input-number v-model.number="form.port" :min="1" controls-position="right" />
        </el-form-item>
        <el-form-item label="IP地址" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="端  口" prop="port">
          <el-input-number v-model.number="form.port" :min="1" controls-position="right" />
        </el-form-item>
        <el-form-item label="HIS接口地址" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="账单循环数" prop="port">
          <el-input-number v-model.number="form.port" :min="1" controls-position="right" />
        </el-form-item>
        <el-form-item label="导诊示例" prop="name" style="width:100%">
          <el-input v-model="form.name" rows="5" type="textarea" />
        </el-form-item>
        <el-form-item label="医院图片">
          <div class="el-upload" style="width:100%;height:100px;text-align:left">
            <img :src="form.imageUrl ? baseApi + '/hospital/' + form.imageUrl : ''" title="点击上传图片" class="avatar" @click="toggleShow">
            <myUpload
              v-model="show"
              :headers="headers"
              :url="imagesUploadApi"
              @crop-upload-success="cropUploadSuccess"
            />
          </div>
        </el-form-item>
        <el-form-item label="医院简介" style="width:100%">
          <div ref="editor" class="text" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 富文本
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import E from 'wangeditor'
// 图片上传
import myUpload from 'vue-image-crop-upload'
import { getToken } from '@/utils/auth'
// 页面权限
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'

const defaultForm = { code: null, name: null, port: null }
  export default {
    name: 'Hospital',
    components: { crudOperation, rrOperation, udOperation, myUpload },
    cruds() {
      return CRUD({ title: '医院', url: 'api/roles' })
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    data() {
      return {
        editorContent:'',
        show:false,
        headers:{
          'Authorization': getToken()
        },
        permission: {
          add: ['admin', 'app:add'],
          edit: ['admin', 'app:edit'],
          del: ['admin', 'app:del']
        },
        rules: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
        }
      }
    },
    computed: {
      ...mapGetters([
        'imagesUploadApi',
        'baseApi'
      ])
    },
    watch:{
      'crud.status.cu':function(val){
        console.log(this);
        if ( val > 0 ) {
          this.editIntroduce();
        }
      },
    },
    created() {
      // 页面需要展示的按钮
      this.crud.optShow = {
        add: true,
        edit: false,
        del: false,
        download: false,
        reset: true
      }
    },
    methods: {
      // 上传图片
      toggleShow() {
        this.show = !this.show
      },
      cropUploadSuccess(jsonData, field) {
        store.dispatch('GetInfo').then(() => {})
      },
      // 触发编辑简介
      editIntroduce(){
        this.$nextTick(() => {
          const _this = this
          var editor = new E(this.$refs.editor)
          // 自定义菜单配置
          editor.customConfig.zIndex = 10
          // 文件上传
          editor.customConfig.customUploadImg = function(files, insert) {
            // files 是 input 中选中的文件列表
            // insert 是获取图片 url 后，插入到编辑器的方法
            files.forEach(image => {
              upload(_this.imagesUploadApi, image).then(res => {
                const data = res.data
                const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
                insert(url)
              })
            })
          }
          editor.customConfig.onchange = (html) => {
            this.editorContent = html
          }
          editor.create()
          // 初始化数据
          editor.txt.html(this.editorContent)
        });
      },
      // 触发单选
      handleCurrentChange(val) {
        if (val) {
          const _this = this
          // 清空菜单的选中
          this.$refs.menu.setCheckedKeys([])
          // 保存当前的角色id
          this.currentId = val.id
          // 初始化默认选中的key
          this.menuIds = []
          val.menus.forEach(function(data) {
            _this.menuIds.push(data.id)
          })
          this.showButton = true
        }
      },
      checkboxT(row) {
        return row.level >= this.level
      }
    }
  }
</script>

<style lang="scss" scoped>
.hospital{
  padding: 20px;
}
</style>
